<template>
	<view class="container">
		<view class="tag">
			<view class="top">
				<view class="yellow_line">
				</view>
				<view class="title">
					企业福利标签
				</view>
				<view class="beizhu">
					(可多选)
				</view>
			</view>
			<view class="tag_list">
				<view :class="oneActiveIndex==index?'active_tag':''" class="tags" v-for="(item,index) in  fuliList" @click="selectTagOne(index)">
					{{item}}
				</view>

			</view>

		</view>
		<view class="tag">
			<view class="top">
				<view class="yellow_line">

				</view>
				<view class="title">
					休假标签
				</view>

			</view>
			<view class="tag_list">
				<view class="tags" :class="twoActiveIndex==index?'active_tag':''" v-for="(item,index) in  holidayList" @click="selectTagTwo(index)">
					{{item}}
				</view>
			</view>


		</view>
		<HandleBtn btnName="确认选择" @click.native="toBack"></HandleBtn>
	</view>
</template>

<script>
	import HandleBtn from "../../components/handleBtn.vue"
	export default {
		components: {
			HandleBtn
		},
		data() {
			return {
				fuliList: ["午休", "包住", "包吃", "不加班", "免费零食", "员工旅游", "定期团建", "生日福利", "五险一金", "免费工装", "交通补贴"],
				holidayList: ['休假可调', "大小周", "上一休一", "月休6天", "周末双休", "月休四天", "周末单休"],
				oneActiveIndex:0,
				twoActiveIndex:0,
			}
		},
		mounted(){
			this.getpositionType()
			this.getpositionLabel()
		},
		methods: {
			toBack(){
				uni.navigateBack({
					delta:1
				})
			},
			// 获取职位类型
			getpositionType(){
				this.$utils.requert({url:'positionType',type:'post'}).then(res=>{
						if(res.code === 1 ){
							this.$utils.showLayer(res.message)
						
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			// 获取职位标签
			getpositionLabel(){
				this.$utils.requert({url:'positionLabel',type:'post'}).then(res=>{
						if(res.code === 1 ){
							this.$utils.showLayer(res.message)
						
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			selectTagOne(index){
				this.oneActiveIndex=index;
				},
            selectTagTwo(index){
				this.twoActiveIndex=index;
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		padding: 37rpx 20rpx;
		box-sizing: border-box;
	}

	.top {
		display: flex;
		align-items: center;
		margin-bottom: 38rpx;
	}

	.yellow_line {
		width: 10rpx;
		height: 35rpx;
		background-color: #fd9103;
		border-radius: 50rpx;
		margin-right: 10rpx;
	}

	.title {
		font-size: 34rpx;
		color: #323232;
	}

	.beizhu {
		font-size: 28rpx;
		color: #BBBBBB;
	}
	.tag_list{
		display: flex;
		flex-wrap: wrap;
	}
	.tags{
		font-size: 28rpx;
		color:#333333;
		width:160rpx;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		border-radius: 7rpx;
		border:3rpx solid #FCA601;
		margin-right: 16rpx;
		margin-bottom: 30rpx;
	}
	.active_tag{
		background-color: #FCA601;
		border:none;
	}
</style>
